import React,{Component} from 'react';
import axios from 'axios';
import './detail.css';
class Detail extends Component{
	constructor(props){
		super(props);
		
		this.state = {
			detailObj:{},
			success:false //标记位
		}
	}
	
	componentDidMount(){
		axios.get('/v4/api/film/'+this.props.match.params.filmid+'?__t=1537260739910')
		.then((rep)=>{
//			console.log(rep);
			//将数据写到state
			this.setState({
				detailObj:rep.data.data.film,
				success:true
			})
			
		})
		
	}
	changeType=(arr)=>{
		var newArr = [];//保存整理好的数组
		for(let item of arr){
			newArr.push(item.name);
		}
		return newArr.join(' | ');
	}
		//时间戳的转换
	formatDate(now) {
		let d = new Date(now);
        let month = d.getMonth() + 1;
        let date = d.getDate();
        return month + "月" + date + "日" ;
    }
	tiaozhuang=()=>{
		this.props.history.push('/cinema')
	}
	//图片报错,是因为我们的数组的数组获取是异步的,
	render(){
		return (
			<div className='detail'>
				{
					this.state.success?
					<div>
						<img src={this.state.detailObj.cover.origin} alt={this.state.detailObj.name}/>
						<div className="film-word1">影片简介</div>
						<div className="film-word2">
							<span>导&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;演：</span>
							<span>{this.state.detailObj.director}</span>
						</div>
						<div className="film-word2">
							<span>主&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;演：</span>
							<span>{this.changeType(this.state.detailObj.actors)}</span>
						</div>
						<div className="film-word2" >
							<span >地区语言：</span>
							<span >{this.state.detailObj.nation}</span>
							<span>(</span>{this.state.detailObj.language}<span>)</span>
						</div>
						<div className="film-word2">
							<span>类&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型：
							</span>
							<span>{this.state.detailObj.category}</span>
						</div>
						<div className="film-word2">
							<span>上映日期：
							</span>
							<span>{this.formatDate(this.state.detailObj.premiereAt)}上映</span>
						</div>
						<div className="film-word3">{this.state.detailObj.synopsis}</div>
					
					</div>
					:''
				}
				<button className="cpn-primary-button"  onClick={this.tiaozhuang}>立即购票</button>
			</div>
		)
		
	}
}


//输出
export default Detail;